<template>
    <div class="example clearfix">
        <div class="example-demo">
            <div class="example-case">
                <slot name="case"></slot>
            </div>
            <div class="example-header">
                <span>{{edata.title}}
                  <!-- <a :href="'#'+name">#</a> -->
                </span>
            </div>
            <div class="example-desc" v-html="md">
            </div>
        </div>
        <div class="example-split"></div>
        <div class="example-code-box">
          <div class="example-code" :class="isClick?'active':'' ">
            <div :class="['code-wrap']" ref="element">
              <pre><code class="html">{{code}} </code></pre>
            </div>
            
          </div>
          <div class="example-code-more" @click="fold">
              <span class="text">{{isClick? '收起' : '展开'}}</span>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
  name: "example",
  props: ["edata"],
  data() {
    return {
      code: "",
      isClick: true    
    };
  },
  methods: {
    fold(){this.isClick = !this.isClick} 
  },
  computed: {
    md() {
      return marked(decodeURIComponent(this.edata.readme));
    }
  },
  created() {
    var vm = this;
    this.code = this.$slots.case[
      "0"
    ].componentOptions.Ctor.extendOptions.__resource.trim();
  },
  mounted() {
    var el = this.$el.getElementsByClassName("example-code")[0];
    // Prism.highlightElement(el)
    hljs.highlightBlock(el);
  }
};
</script>
<style lang="scss">
.example {
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 20px;
  position: relative;
  transition: all 0.2s ease-in-out;

  .example-demo,
  .example-code-box {
    width: 50%;
    float: left;
    position: relative;
  }
  .example-code {
    padding-bottom: 30px;
    .code-wrap {
      height: 150px;
      overflow: hidden;
      transition: all 0.5s;
    }
    &.active {
      .code-wrap {
        height: auto;
      }
    }
  }

  .example-header {
    font-weight: 500;
    margin: 50px 0 10px;
    position: relative;
  }
  .example-desc {
    font-size: 12px;
    padding: 0 20px;
    padding-top: 10px;
  }
  .example-code-more {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 5px 0;
  }
}
</style>
